<template>
<div class="recommend">
    <div class="title">
        热门景点推荐
    </div>
<ul class="btn">
      <li @click="index=0" :style="index==0?active:''"><a href="javascript:;" :style="index==0?active1:''">当季景点门票</a></li>
      <li  @click="index=1" :style="index==1?active:''"><a href="javascript:;" :style="index==1?active1:''">特惠门票</a></li>
</ul>
    <ul>
            <router-link :to="'/detail'+item.id" tag="li" class="item" v-for="item of arr" :key='item.id'>
                <div class="item-img">
                <img :src="item.url" alt="">
            </div>
            <div class="item-info">
                <p class="item-info-title">{{item.title}}</p>
                <p class="item-info-desc">{{item.desc}}</p>
                <p class="price">{{item.price}}</p>
            </div>
            </router-link>
    </ul>
</div>
</template>

<script>
export default {
    name:'HomeRecommend',
    data(){
        return{
            arr:[],
            active:{
                'backgroundColor':'#17c0c8',
            },
            active1:{
                 'fontWight':"600",
                 'color':"#fff"
            },
            index:1
        }
    },
watch:{
    index:{
        handler(newval,oldval){
            if(newval==1){
                this.arr=[{
                id:1,
                url:'https://img1.qunarzz.com/sight/p0/1906/8b/8b4b03cec0d4da6aa3.img.jpg_256x160_ed39cb55.jpg',
                title:'南昌玛雅乐园',
                desc:"周末娱乐必去的地方",
                price:"￥160"
            },{
                id:2,
                url:'https://imgs.qunarzz.com/sight/p0/1501/87/9dcb13572c70d3a2aae83b44121db72b.water.jpg_256x144_9e84c7ac.jpg',
                title:'庐山风景名胜区',
                desc:"匡庐奇秀甲天下",
                price:"￥160"
            },{
                id:3,
                url:'https://img1.qunarzz.com/sight/p0/1604/17/1752b1666c36d89990.water.jpg_256x160_af3308f8.jpg',
                title:'三清山',
                desc:"人间四月芳菲尽 三清杜鹃始盛开",
                price:"￥120"
            },{
                id:4,
                url:'https://imgs.qunarzz.com/sight/p0/1802/e0/e0736ee4db571454a3.img.jpg_256x144_0edb798a.jpg',
                title:'婺源',
                desc:"中国绝美乡村，开始你的文艺之旅",
                price:"￥105"
            },]
            }else{
                this.arr=[{
                id:4,
                url:'https://img1.qunarzz.com/sight/p0/1702/db/dbc8f6cf051b3803a3.water.jpg_256x160_0cff5839.jpg',
                title:'龙虎山',
                desc:"神秘的古越族文明，体验绝美的自然风光",
                price:"￥160"
            },{
                id:5,
                url:'https://img1.qunarzz.com/sight/p0/1505/77/77179a76466805bc.water.jpg_256x160_b6aa07be.jpg',
                title:'武功山',
                desc:"高山草甸，初见惊艳，再见依然！",
                price:"￥60"
            },{
                id:1,
                url:'https://img1.qunarzz.com/sight/p0/1906/8b/8b4b03cec0d4da6aa3.img.jpg_256x160_ed39cb55.jpg',
                title:'南昌玛雅乐园',
                desc:"周末娱乐必去的地方",
                price:"￥160"
            },{
                id:3,
                url:'https://img1.qunarzz.com/sight/p0/1604/17/1752b1666c36d89990.water.jpg_256x160_af3308f8.jpg',
                title:'三清山',
                desc:"人间四月芳菲尽 三清杜鹃始盛开",
                price:"￥120"
            },]
            }
        }
    },
},
    mounted(){
    this.index=0
}
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/css/ellipsis.styl'
.recommend
    width 100%
    .btn
        width 100%
        margin-top .1rem
        display block
        li
            text-align center
            border 0.02rem solid #e6e6e6
            float left
            margin-left .2rem
            padding .15rem
            border-radius .1rem
            a
                color  #737373
    .title
        margin-top .2rem
        line-height .8rem 
        background-color #f3f3f3
        text-indent .2rem
    ul
        padding 1%
        display flex
        width 98%
        justify-content space-around
        flex-wrap wrap
        .item
            display flex
            flex-direction column
            width 46%
            height auto
            overflow hidden
            margin-top .1rem
            .item-img
                width 100%
                overflow hidden
                height 27vw
                border-radius .1rem
                img
                  width 100%
                  height 100%  
            .item-info
                margin-top .1rem
                font-size .3rem
                text-indent .1rem
                .item-info-desc
                    font-size .28rem
                    color #9f9f9f
                    margin-top .1rem
                    ellipsis()
                .price
                    margin-top .1rem
                    font-size .36rem
                    font-weight 600
                    color #ff7400


</style>